<{include file="Common/head"}>
<{include file="Common/menu"}>

<link href="_index_/yy/index.css" rel="stylesheet">
<link href="_index_/yy/laydate.css" rel="stylesheet">
<script src="_index_/yy/laydate.js"></script>
<script type="text/javascript" src="_index_/laydate/laydate.js"></script>
<style type="text/css">

    .submit,.reset{    cursor: pointer;}
	#test-limit3{  width: 40%;  height: 30px;  padding: 2px 5px;  font-size: 16px;  color: #555;  }
    #test-limit2{    height: 30px;  padding: 2px 5px;  font-size: 16px;  color: #555;  }
    .appointment .physician input{width:15px;height:15px;}
    .appointment .position input{width:15px;height:15px;}
    .colorred{color:red;}
    .phone,.yaoyue{height:40px;}
    .test-5::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #ddd;
    }
    .test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #fff;
    }
    .time_hour,.time_min{border: solid 1px #eee;}
    .Hui-article-box{ top:15px!important;}

    .check-box {
        width: 200px;
    }

   /* @media (max-width: 767px) {
        .check-box{
            width:160px;
        }
    }*/
</style>

<section class="Hui-article-box test-5" >
    <form class="appointment">
        <ul>
            <li>
                <h2>预约日期：</h2>
                <div class="laydate-box">
                    <input type="text" id="laydateInput" placeholder="xxxx年xx月xx日" autocomplete="off"/>
                    <div class="select-date">
                        <div class="select-date-header">
                            <ul class="heade-ul">
                                <li class="header-item header-item-one">
                                    <select name="" id="yearList"></select>
                                </li>
                                <li class="header-item header-item-two" onselectstart="return false">
                                    <select name="" id="monthList"></select>
                                </li>
                                <li class="header-item header-item-three" onselectstart="return false">
                                    <span class="reback">回到今天</span>
                                </li>
                            </ul>
                        </div>
                        <div class="select-date-body">
                            <ul class="week-list">
                                <li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>
                            </ul>
                            <ul class="day-tabel"></ul>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <!--
				<h2>时　　间：</h2>
                <input type="text" autocomplete="off" name="time" class="layui-input time" id="test-limit3" placeholder="时:分:秒">
                -->
                <h2>时　　间：</h2>
                <select id="time_hour" class="time_hour select_hour"  name="time_hour" style="width: 30%;font-size: 16px;">
                   <!--  <option value="08">08</option> -->
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                </select>
                <select id="time_min" class="time_min select_min" name="time_min"  style="width: 30%;font-size: 16px;">
                    <option value="00">00</option>
                    <option value="30">30</option>
                </select>
            </li>
            <li>
                <h2>卡号/手机：</h2>
                <input type="text" autocomplete="off" name="hongmai" class="layui-input input-text hongmai" id="test-limit2" placeholder="卡号/手机">
            </li>
            <li>
                <h2>顾客姓名：</h2>
                <input type="text" autocomplete="off" name="name" class="layui-input name"  placeholder="顾客姓名">
            </li>
            <!--<li>-->
                <!--<h2>电　　话：</h2>-->
                <!--<input class="phone input-text" autocomplete="off" name="phone" type="text" placeholder="顾客电话" />-->
            <!--</li>-->

            <li>
                <h2>渠　　道：</h2>
                <select class="channel" name="from">
                    <?php
                        foreach($data[5]['value'] as $fk => $fv){
                    ?>
                    <option value="<?php echo $fv; ?>"><?php echo $fv; ?></option>
                    <?php
                        }
                    ?>
                </select>
            </li>
            <li>
                <h2>邀 约 人：</h2>
                <input type="text" name="yaoyue" autocomplete="off" class="input-text yaoyue"  placeholder="邀约人">
            </li>


            <li>
                <h2>治疗项目：</h2>
                <div class="position skin-minimal">
                    <!--<div class="check-box" ><input class="check_position" type="checkbox" name="position" value="其他" > <label>其他</label></div>-->
                    <?php
                            foreach($data[1]['value'] as $pk => $pv){
                    ?>
                    <div class="check-box" ><input class="check_position" type="checkbox" name="position" value="<?php echo $pv; ?>" id="it_<?php echo $pk; ?>"> <label for="it_<?php echo $pk; ?>"><?php echo $pv; ?></label></div>
                    <?php
                            }
                        ?>
                </div>
            </li>

            <li>
                <h2>主任/医生：</h2>
                <div class="physician">
                    <div class="check-box"><input class="doctor_class" id="do_c_wd" type="checkbox" name="doctor" value="无指定（科室安排）" > <label id="do_wd" for="do_wd">无指定（科室安排）</label></div>
                    <?php
                            foreach($data[4]['value'] as $dk => $dv){
                    ?>
                    <div class="check-box"><input class="doctor_class" id="do_c_<?php echo $dv; ?>" type="checkbox" name="doctor" value="<?php echo $dv; ?>" > <label id="do_<?php echo $dv; ?>" for="do_<?php echo $dv; ?>"><?php echo $dv; ?></label></div>
                    <?php
                        }
                    ?>
                </div>
            </li>

            <li>
                <h2>治疗师：</h2>
                <div class="physician" style="padding: 2px 5px;font-size: 18px;color: #555;line-height: 40px;">
                    <div class="check-box"><input class="meirongshi_class" id="do_zl_c_wd" type="checkbox" name="meirongshi" value="无指定（科室安排）" > <label id="do_zl_wd" for="do_wd">无指定（科室安排）</label></div>
                    <?php
                            foreach($data[7]['value'] as $nk => $nv){
                    ?>
                    <div class="check-box" style="width:200px"><input class="meirongshi_class" id="do_c_<?php echo $nv; ?>" type="checkbox" name="meirongshi" value="<?php echo $nv; ?>" > <label id="do_<?php echo $nv; ?>" for="mr_<?php echo $nv; ?>"><?php echo $nv; ?></label></div>
                    <?php
                            }
                        ?>
                </div>
            </li>


            <li>
                <h2>设　　备：</h2>
                <div class="physician">
                    <!--<div class="check-box"><input class="device_class" type="checkbox" name="device" value="其他"><label>其他</label></div>-->
                    <?php
                        foreach($data[0]['value'] as $dk => $dv){
                    ?>
                    <div class="check-box">
                        <input class="device_class" type="checkbox" name="device" value="<?php echo str_replace('[error]','',$dv); ?>" id="d_<?php echo $dk; ?>" <?php if(strpos($dv,"[error]")){echo "disabled";} ?>>
                        <label id="d_c_<?php echo $dk; ?>" for="d_<?php echo $dk; ?>" class='<?php if(strpos($dv,"[error]")){echo "colorred";} ?>'><?php echo str_replace('[error]','',$dv); ?></label>
                    </div>
                    <?php
                        }
                    ?>
                </div>
            </li>

            <li>
                <h2>预计时长：</h2>
                <select id="lengthtime" class="lengthtime" name="time_length">
                    <option value="1小时">1小时</option>
                    <option value="1.5小时">1.5小时</option>
                    <option value="2小时">2小时</option>
                    <option value="2.5小时">2.5小时</option>
                    <option value="3小时">3小时</option>
                    <option value="3.5小时">3.5小时</option>
                    <option value="4小时">4小时</option>
                </select>
            </li>
            <li>
                <h2>备　　注：</h2>
                <textarea class="message" name="message" rows="5"></textarea>
            </li>
			<li><input class="btn btn-success radius submit" type="button" value="添加"></li>
        </ul>
    </form>

</section>
<script type="text/javascript">

$(function(){



    if('<{$timeType}>'>=1){//预约页面点击的添加
        positionItem='<{$position}>';
        dateItem='<{$date}>';
        time_hour='<{$time[0]}>';

        item=document.getElementsByClassName("check_position");
        for(key in item){
            if(item[key].value==positionItem){
                item[key].checked=true;
                break;
            }else{
            }
        }
        $("#laydateInput").val(dateItem)
        $(".time_hour").val(time_hour)
        $(".time_min").val('<{$time[1]}>')

        if(time_hour==8){
            updateTImeMin();//更新分钟
        }
    }else{
        updateTImeMin();
    }


	//限定可选时间
    /*
    laydate.render({
        elem: '#test-limit3'
        ,type: 'time'
        ,min: '09:00:00'
        ,max: '19:00:00'
        ,btns: ['clear', 'confirm']
    });
     */
    $(".reset").click(function() {
        $(".appointment")[0].reset();
        $(".reback").click();
    });

    $(".submit").on("click",function(){
        positionType=0;

        //治疗项目
        obj = document.getElementsByName("position");
        check_val = [];
        for(k in obj){
            if(obj[k].checked){
                check_val.push(obj[k].value);
                if(obj[k].value=='化学焕肤'||obj[k].value=='黄金微针'||obj[k].value=='纹绣'||obj[k].value=='其他'){
                    positionType=1;//仪器可以不选
                }
            }
        }

        //设备zhiliaoshi
        obj = document.getElementsByName("device");
        device_val = [];
        for(k in obj){
            if(obj[k].checked)
                device_val.push(obj[k].value);
        }

        //医生
        obj = document.getElementsByName("doctor");
        doctor_val = [];
        for(k in obj){
            if(obj[k].checked)
                doctor_val.push(obj[k].value);
        }


        //美容师
        obj = document.getElementsByName("meirongshi");
        meirongshi_val = [];
        for(k in obj){
            if(obj[k].checked)
                meirongshi_val.push(obj[k].value);
        }

        //护士
        obj = document.getElementsByName("hushi");
        hushi_val = [];
        for(k in obj){
            if(obj[k].checked)
                hushi_val.push(obj[k].value);
        }


        if(check_val.length==0){
            alert("治疗项目必选");
            return false;
        }

        if(doctor_val.length==0&&meirongshi_val.length==0&&hushi_val.length==0){
            alert("治疗人员选项必选");
            return false;
        }
        if(device_val.length==0&&positionType!=1){
            alert("仪器必选");
            return false;
        }

        date        = $("#laydateInput").val(); //预约日期
        //zhiliaoshi_val= $(".zhiliaoshi").val();
        hongmai     = $(".hongmai").val();        //会员卡号
        //time        = $(".time").val();        //治疗时间 几点钟
        time        = ($(".time_hour").val())+":"+($(".time_min").val());        //治疗时间 几点钟
        name        = $(".name").val();        //顾客姓名
        yaoyue        = $(".yaoyue").val();        //邀约
        channel     = $(".channel").val();        //渠道
        position    = check_val;        //治疗项目
        //phone       = $(".phone").val();
        lengthtime  = $(".lengthtime").val();        //预计时长
        doctor      = doctor_val;         //医生
        meirongshi  = meirongshi_val;        //美容师
        device      = device_val;        //设备
        message     = $(".message").val();        //留言
        hushi       = hushi_val;//护士

        if(hongmai.length==0||name.length==0||yaoyue.length==0){
            alert("会员卡号、顾客姓名、邀约人不能为空");
            return false;
        }


        var postdata = {
            "date":date,
            "hongmai":hongmai,
            "time":time,
            "name":name,
            "yaoyue":yaoyue,
            //"phone":phone,
            "channel":channel,
            "position":position,
            "lengthtime":lengthtime,
            "doctor":doctor,
            "meirongshi":meirongshi,
            "device":device,
            //"zhiliaoshi":zhiliaoshi_val,
            "message":message,
            "hushi":hushi
        };

        //console.log(postdata);


        $.post("/index/Index/adddata",postdata,function(e){
            if(e==1){
                $.Huimodalalert('提交成功',2000);
                window.close();
                setInterval(function(){
                    location.reload();
                },2000)
            }else{

            }
        });


    });


    //弹出式添加页面，隐藏左边菜单栏
    if(document.body.clientWidth>760){
        $(".navbar-wrapper").css("display","none");
        $("body").addClass("big-page");
        $(".dislpayArrow").css("display","none");
    }




    getSelectDate();

});


function getSelectDate(result){
    //治疗项目
    obj = document.getElementsByName("position");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }

    //排班信息显示
    date        = $("#laydateInput").val(); //预约日期
    time        = ($(".time_hour").val())+":"+($(".time_min").val());        //治疗时间 几点钟
    position    = check_val;        //治疗项目

    time_number=Number(($(".time_hour").val())+"."+($(".time_min").val()));

    var postdata = {
        "date":date,"time":time,"position":position
    };

    //console.log(postdata)

    $.post("/index/Index/getPaiban",postdata,function(e){

        for(k in e){
            //console.log(e[k].name);
            if(e.code==2&&k!='code'){
                document.getElementById("do_"+e[k]).innerText=e[k];
            }else if(e.code==1&&k!='code'){
                document.getElementById("do_"+e[k].name).innerText=e[k].name+"("+e[k].work+")";

                item =document.getElementById("do_c_"+e[k].name);

                if(e[k].work!='早'&&e[k].work!='晚'&&e[k].work!='补早'&&e[k].work!='补晚'&&e[k].work!='中'){
                    item.disabled='1';
                }else if(e[k].disabled=='1'){//有预约
                    item.disabled='1';item.checked=false;
                    document.getElementById("do_"+e[k].name).innerText=e[k].name+"(预)";
                }else if(e[k].disabled=='2'){//超过时间
                    item.disabled='1';item.checked=false;
                    document.getElementById("do_c_wd").disabled='1';//无指定选项
                    document.getElementById("do_zl_c_wd").disabled='1';//无指定选项

                }else if(e[k].position=='2'){//项目过滤
                    item.disabled='1';item.checked=false;
                }
                else if((e[k].work=='晚'||e[k].work=='补晚')&&time<'11'){
                    item.disabled='1';item.checked=false;
                }else if((e[k].work=='早'||e[k].work=='补早')&&time_number>=17.3){
                    item.disabled='1';item.checked=false;
                } else if((e[k].work=='中'||e[k].work=='补中')&&(time_number>=19||time_number<10)){
                    item.disabled='1';item.checked=false;
                } else{
                    item.disabled='';
                    document.getElementById("do_c_wd").disabled='';//无指定选项
                    document.getElementById("do_zl_c_wd").disabled='';//无指定选项
                }
            }

        }
    });


    getSelectDevice();
}


$('.doctor_class').change(function(){//医生单选设置
    item=document.getElementsByClassName("doctor_class");
    for(key in item){
        if(item[key].value==$(this).val()){
        }else{
            item[key].checked=false;
        }
    }
})
$('.meirongshi_class').change(function(){
    item=document.getElementsByClassName("meirongshi_class");
    for(key in item){
        if(item[key].value==$(this).val()){
        }else{
            item[key].checked=false;
        }
    }
})
$('.device_class').change(function(){
    item=document.getElementsByClassName("device_class");
    for(key in item){
        if(item[key].value==$(this).val()){
        }else{
            item[key].checked=false;
        }
    }
})
$('.check_position').change(function(){
    item=document.getElementsByClassName("check_position");
    for(key in item){
        if(item[key].value==$(this).val()){
        }else{
            item[key].checked=false;
        }
    }
})
//

$("#time_hour").change(function(data){
    getSelectDate();
    updateTImeMin();
})
$("#time_min").change(function(data){
    getSelectDate();
})
$(".check_position").change(function(data){//治疗项目触发
    getSelectDate();
    getData()
    //console.log('check_position');

    var postdata = {
        "position":position[0]
    };
    $.post("/index/Index/getPosition",postdata,function(e){
        var htmllet='';
        for(k in e.data){
            htmllet +="<option value='"+e.data[k]+"小时'>"+e.data[k]+"小时</option>";
        }
        document.getElementById("lengthtime").innerHTML=htmllet;
    });
})

function updateTImeMin(){//更新分钟
    time_hour=$(".time_hour").val()
    if(time_hour==8){
        htmllet ='<option value="30">30</option>';
    }else{
        htmllet ='<option value="00">00</option> <option value="30">30</option>';
    }
    document.getElementById("time_min").innerHTML=htmllet;
}



function getSelectDevice(){//设备更新
    getData()
    var postdata = {
        "date":date,"time":time,"lengthtime":lengthtime,"device":device[0],"position":position[0]
    };
    //console.log(postdata);
    $.post("/index/Index/getDevice",postdata,function(e){
        //console.log(e);
        for(k in e){
            if(e.code==1&&k!='code'&&k!='deviceStr'){
                document.getElementById("d_c_"+k).innerText=e[k].name+"("+e[k].number+")";
                itemD=document.getElementById("d_"+k);
                if(e[k].number<=0){
                    itemD.disabled='1';
                    itemD.checked=false;
                    document.getElementById("d_c_"+k).innerText=e[k].name+"(0)";
                    if(e[k].deviceStr!=''){
                        $.Huimodalalert(device[0]+':'+e[k].deviceStr+'已在该使用范围内请重新选择',5000);
                        window.close();
                    }
                }else if(e[k].filterType==1){//项目过滤设备
                    itemD.disabled='';
                    itemD.checked=true;
                }else if(e[k].filterType==0){//项目过滤设备
                    itemD.disabled='1';
                    itemD.checked=false;
                }else{
                    itemD.disabled='';
                }
            }
        }
    });
}



$(".lengthtime").change(function(data){
    getData()
    var postdata = {
        "date":date,"time":time,"lengthtime":lengthtime,"doctor":doctor[0],"meirongshi":meirongshi[0]
    };
    if(doctor!=''||meirongshi!=''){
        $.post("/index/Index/updateLengthtime",postdata,function(e){//判断预约时长
            //console.log(e);
            if(e.code==1){

                $.Huimodalalert('预约时长不在范围内请重新选择：'+e.freeTimedata,5000);
                window.close();

                $(".lengthtime").val('30分钟')
            }
        });
    }else if(doctor==''&&meirongshi==''){
        $.Huimodalalert('请选择治疗人员',2000);
        window.close();

        $(".lengthtime").val('30分钟')
    }
    getSelectDevice()//设备更新
})

function getData(){//获取数据
    //治疗项目
    obj = document.getElementsByName("position");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    //医生
    obj = document.getElementsByName("doctor");
    doctor_val = [];
    for(k in obj){
        if(obj[k].checked)
            doctor_val.push(obj[k].value);
    }
    //美容师
    obj = document.getElementsByName("meirongshi");
    meirongshi_val = [];
    for(k in obj){
        if(obj[k].checked)
            meirongshi_val.push(obj[k].value);
    }
    //设备zhiliaoshi
    obj = document.getElementsByName("device");
    device_val = [];
    for(k in obj){
        if(obj[k].checked)
            device_val.push(obj[k].value);
    }

    position    = check_val;        //治疗项目
    lengthtime  = $(".lengthtime").val();        //预计时长
    doctor      = doctor_val;         //医生
    meirongshi  = meirongshi_val;        //美容师
    device      = device_val;        //设备
}
</script>
<{include file="Common/footer"}>